<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	import {
		parseTime
	} from '@/utils/ruoyi'
	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			dw: {
				type: String,
				default: ''
			},
			colorindex: {
				type: Number,
				default: 0
			},
			showtype: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				x: [],
				a: [],
				colorList: ["#ffff00", '#04cc04', '#00aaff', '#9E87FF', '#2eff51']
			}
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.initChart()
				setInterval(function() {
					// that.c.push(Math.random() * 2).toFixed(2);
					// that.d.push(Math.random() * 20).toFixed(2);
					that.a.push(Math.random() * 20).toFixed(2);
					// that.v.push(Math.random() * 20).toFixed(2);
					that.x.push(parseTime(new Date(),'{h}:{i}:{s}'));
					that.initChart();
				}, 2000);
			})
		},
		beforeDestroy() {
			let that = this;
			that.a = [];
			that.x = [];
			if (!this.chart) {
				return
			}
			that.chart.dispose()
			that.chart = null
		},
		methods: {
			setnums(a, d, falg) {
				let that = this;
				//that.t.push(t);
				// that.a = [];
				// that.v = [];
				// that.x = [];
				if (falg) {
					that.a = [];
					that.x = [];
				}
				that.a = a;
				that.x = d;
				that.$nextTick(() => {
					that.initChart();
				})
			},
			close() {
				this.a = [];
				this.x = [];
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')
				this.chart.setOption({
					// backgroundColor: '#fff',
					title: {
						text: '',
						textStyle: {
							fontSize: 12,
							fontWeight: 400
						},
						left: 'center',
						top: '2%'
					},
					dataZoom: [{
					      type: 'slider',
					      show: true,
					      xAxisIndex: [0],
					      left: '5%',
					      bottom: -5,
					      start: 10,
					      end: 90 //初始化滚动条
					  }],
					// dataZoom: [{
					// 		start: 0, //默认为0
					// 		end: 100 - 1500 / 31, //默认为100
					// 		type: 'slider',
					// 		show: true,
					// 		xAxisIndex: [0],
					// 		handleSize: 0, //滑动条的 左右2个滑动条的大小
					// 		height: 15, //组件高度
					// 		left: '5%', //左边的距离
					// 		right: '4%', //右边的距离
					// 		bottom: 26, //底边的距离
					// 		borderColor: "#aaaa7f",
					// 		fillerColor: '#269cdb',
					// 		borderRadius: 50,
					// 		backgroundColor: '#aaffff', //两边未选中的滑动条区域的颜色
					// 		showDataShadow: true, //是否显示数据阴影 默认auto
					// 		showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
					// 		realtime: true, //是否实时更新
					// 		filterMode: 'filter',
					// 	},
					//  //下面这个属性是里面拖到
					// 	{
					// 		type: 'inside',
					// 		show: true,
					// 		xAxisIndex: [0],
					// 		start: 0, //默认为1
					// 		end: 100 - 1500 / 31, //默认为100
					// 	}
					// ],

					toolbox: { //可视化的工具箱
						show: true,
						x: '10%',
						feature: {
							dataView: { //数据视图
								show: true
							},
							restore: { //重置
								show: true
							},
							dataZoom: { //数据缩放视图
								show: true
							},
							saveAsImage: { //保存图片
								show: true
							},
							magicType: { //动态类型切换
								type: ['bar', 'line']
							}
						}
					},
					legend: {
						icon: 'circle',
						top: '1%',
						right: '5%',
						itemWidth: 6,
						itemGap: 20,
						textStyle: {
							color: '#556677'
						}
					},

					tooltip: {
						trigger: 'axis',
						axisPointer: {
							label: {
								show: true,
								backgroundColor: '#fff',
								color: '#556677',
								borderColor: 'rgba(0,0,0,0)',
								shadowColor: 'rgba(0,0,0,0)',
								shadowOffsetY: 0
							},
							lineStyle: {
								width: 0
							}
						},
						backgroundColor: '#fff',
						textStyle: {
							color: '#5c6c7c'
						},
						padding: [10, 10],
						extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
					},
					grid: {
						top: '10%',
						left: '5%',
						right: '3%',
						bottom: '30%',
					},
					xAxis: [{
						type: 'category',
						data: that.x,
						axisLine: {
							lineStyle: {
								color: '#DCE2E8'
							}
						},
						axisTick: {
							show: false
						},
						// axisLabel: {
						// 	interval: 500,
						// 	textStyle: {
						// 		color: '#556677'
						// 	},
						// 	// 默认x轴字体大小
						// 	fontSize: 12,
						// 	// margin:文字到x轴的距离
						// 	margin: 15
						// },
						axisLabel:{
						    show: true,
							interval: 500,
						    textStyle: {
						      color: '#47576A'   //这里用参数代替了
						    },
						     rotate: 30,//文字倾斜角度
						    // formatter: function (value) {
						    //   if (value.length > 5) {
						    //    value = value.substring(0, 4) + "..";
						    //   }
						    //   return value;
						    // },
						},
						axisPointer: {
							label: {
								// padding: [11, 5, 7],
								padding: [0, 0, 10, 0],
								/*
					    除了padding[0]建议必须是0之外，其他三项可随意设置
					    
					    和CSSpadding相同，[上，右，下，左]
					    
					    如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
					    
					    padding[2]的10:
					    
					    10 = 文字距下边线的距离 + 下边线的宽度
					                
					    如：UI图中文字距下边线距离为7 下边线宽度为2
					    
					    则padding: [0, 0, 9, 0]
					                
					                */
								// 这里的margin和axisLabel的margin要一致!
								margin: 15,
								// 移入时的字体大小
								fontSize: 12,
								backgroundColor: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: '#fff' // 0% 处的颜色
									}, {
										// offset: 0.9,
										offset: 0.86,
										/*
					0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
					                        
					                        */
										color: '#fff' // 0% 处的颜色
									}, {
										offset: 0.86,
										color: '#33c0cd' // 0% 处的颜色
									}, {
										offset: 1,
										color: '#33c0cd' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						boundaryGap: true
					}],
					yAxis: [{
						type: 'value',
						name: that.showtype,
						// min: -20,
						// max: 20,
						interval: 5,
						axisLabel: {
							formatter: '{value}' + that.dw
						}
					}],
					series: [{
						name: that.showtype,
						type: 'line',
						data: that.a,
						symbolSize: 1,
						symbol: 'circle',
						smooth: true,
						yAxisIndex: 0,
						showSymbol: false,
						lineStyle: {
							width: 5,
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: that.colorList[that.colorindex]
								},
								{
									offset: 1,
									color: that.colorList[that.colorindex]
								}
							]),
							shadowColor: 'rgba(158,135,255, 0.3)',
							shadowBlur: 10,
							shadowOffsetY: 20
						},
						itemStyle: {
							normal: {
								color: that.colorList[that.colorindex],
								borderColor: that.colorList[that.colorindex]
							}
						}
					}]
				})
			}
		}
	}
</script>
